<%@taglib uri="/struts-tags" prefix="s"%>
<!doctype html>

<html lang="en" class="no-js">
<head>
<style type="text/css">
a {
	cursor: pointer;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>BU/Directorate Detail</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Combined stylesheets load -->
<!-- Load either 960.gs.fluid or 960.gs to toggle between fixed and fluid layout -->
<link href="css/main.css" rel="stylesheet" type="text/css">

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-large.png">
<script src="js/index.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jstab.js"></script>
<script>
	function ValidateData() {
		var x = document.forms[0]["directorate.directorateName"].value;
		var y = document.forms[0]["directorate.addressLine1"].value;
		var z = document.forms[0]["postCode"].value;
		var w = document.forms[0]["businessName"].value;
		var k = true;

		var MyPara = "";
		if (x == null || x == "") {
			MyPara = MyPara + "Directorate name must be filled out<br><br/>  ";
			k = false;
		}
		if (y == null || y == "") {
			MyPara = MyPara + "Address Line 1 must be filled out<br><br/>  ";
			k = false;
		}
		if (z == null || z == "") {
			MyPara = MyPara + "Postcode must be filled out<br><br/>  ";
			k = false;
		}
		if (w == null || w == "") {
			MyPara = MyPara + "Type of business must be filled out<br><br/>  ";
			k = false;
		}
		if (k == false) {
			document.getElementById('message').innerHTML = MyPara;
			var myPara = document.getElementById('message');
			myPara.style.color = "red";
		} else {

			document.forms[0].submit();
			window.location.href = "listDirectorate.jsp";

		}
	}
</script>
<script>
	$(document).ready(function() {
		$("#tabs").tabs();

		$("#sp-table").tablesorter().tablesorterPager({
			container : $("#sp-pager"),
			positionFixed : false
		});

		$("#sp-table .header").click(function() {
			$("#sp-table tfoot .first").click();
		});

		$("#dir-table").tablesorter().tablesorterPager({
			container : $("#dir-pager"),
			positionFixed : false
		});

		$("#dir-table .header").click(function() {
			$("#dir-table tfoot .first").click();
		});

	});
	function showTab3() {
		$("#btnTabs-3").show();
	}
	function hideTab3() {
		$("#btnTabs-3").hide();
	}
	function showTab4() {
		$("#btnTabs-4").show();
	}
	function hideTab4() {
		$("#btnTabs-4").hide();
	}
	function showTab5() {
		$("#btnTabs-5").show();
	}
	function hideTab5() {
		$("#btnTabs-5").hide();
	}
	function showTab6() {
		$("#btnTabs-6").show();
	}
	function hideTab6() {
		$("#btnTabs-6").hide();
	}
</script>

<script type="text/javascript">
	
</script>

</head>

<body>
	<!-- Header -->

	<!-- Server status -->
	<header></header>
	<!-- End server status -->

	<!-- Main nav -->
	<nav id="main-nav">

		<ul class="container_12">
			<li class="home current">
				<ul>

					<li><a href="homepage.jsp" title="Home">Home</a></li>

					<!-- Organisations menu -->
					<li class="with-menu"><a href="javascript:void(0)"
						title="Organisations">Organisations</a>
						<div class="menu">
							<img src="images/menu-open-arrow.png" width="16" height="16">
						</div></li>

					<!-- Services menu -->
					<li class="with-menu"><a href="javascript:void(0)"
						title="Organisations">Services</a>
						<div class="menu">
							<img src="images/menu-open-arrow.png" width="16" height="16">
							<ul>
								<li class="sep"></li>

								<li class="icon_blog"><a href="javascript:void(0)">Programme</a>
									<ul>
										<li class="icon_address"><a href="listProgramme.action">List
												Programme</a></li>
									</ul></li>
							</ul>
						</div></li>

					<!-- Geography menu -->
					<li class="with-menu"><a href="javascript:void(0)"
						title="Organisations">Geography</a>
						<div class="menu">
							<img src="images/menu-open-arrow.png" width="16" height="16">
							<ul>
								<li class="icon_blog"><a href="javascript:void(0)">Government
										Office Region</a>
									<ul>
										<li class="icon_address"><a href="listGovernment.action">List
												Government Office Region</a></li>
									</ul></li>
							</ul>
						</div></li>

					<!-- Premises menu -->
					<li class="with-menu"><a href="javascript:void(0)"
						title="Organisations">Premises</a>
						<div class="menu">
							<img src="images/menu-open-arrow.png" width="16" height="16">
							<ul>
								<li class="icon_address"><a href="javascript:void(0)">List
										Premises</a></li>
								<li class="icon_export"><a href="javascript:void(0)">Add
										Premises</a></li>
								<li class="icon_refresh"><a href="javascript:void(0)">Amend
										Premises</a></li>
								<li class="icon_computer"><a href="javascript:void(0)">Facility
										Maintenance</a></li>
								<li class="icon_terminal"><a href="javascript:void(0)">Volunteering
										Opportunity</a></li>
								<li class="icon_battery"><a href="javascript:void(0)">Minor
										Work Projects</a></li>
								<li class="icon_building"><a href="javascript:void(0)">Services</a>
								</li>

							</ul>
						</div></li>
				</ul>
			</li>

		</ul>
	</nav>
	<!-- End main nav -->

	<!-- Sub nav -->
	<div id="sub-nav">
		<div class="container_12"></div>
	</div>
	<!-- End sub nav -->

	<!-- Status bar -->
	<div id="status-bar">
		<div class="container_12">

			<ul id="status-infos">
				<li class="spaced">Logged as: <strong>${account }</strong>
				</li>
				<li><a href="login.jsp" class="button red" title="Logout"><span
						class="smaller">LOGOUT</span> </a></li>
			</ul>

		</div>
	</div>
	<!-- End status bar -->

	<div id="header-shadow"></div>
	<!-- End header -->

	<!-- Always visible control bar -->
	<div id="control-bar" class="grey-bg clearfix">
		<div class="container_12"></div>
	</div>
	<!-- End control bar -->

	<!-- Content -->
	<article class="container_12">


		<section class="grid_8">
			<div class="block-border">
				<form class="block-content form" name="table_form" method="get"
					action="listDepartment">
					<h1>Business Unit / Directorate Detail</h1>

					<div class="block-controls"></div>
					<div class="columns">

						<div id="tabs">

							<ul class="tabs js-tabs same-height">
								<li><a href="#tabs-1">Details</a></li>
								<li><a href="#tabs-2">Departments</a></li>

							</ul>
							<div class="float-right" style="margin: -2.5em 2em 0 0;">
								<a class="button" id="active" value="Deactivate"
									onclick="changeSource(this)" title="flag" href="#"> <span
									class="smaller"> <img id="flagImage" height="16"
										width="16" src="images/Decisions/disapprove.png" /> <strong
										id="flagLabel" class="tmpAc">Deactivate</strong>
								</span>
								</a> <a class="button" onclick="ValidateData()"
									style="cursor: pointer"> <span class="smaller"> <img
										height="16" width="16"
										src="images/icons/fugue/tick-circle.png"> <strong>SAVE</strong>
								</span>
								</a> <a class="button" title="Logout" onclick="history.go(-1);">
									<span class="smaller"><img height="16" width="16"
										src="images/icons/fugue/navigation-180.png"><strong>
											BACK </strong> </span>
								</a>

							</div>

							<div class="tabs-content">

								<div id="tabs-1" style="height: 550px">
									<ul class="message warning no-margin">
										<li id="message">This is a <strong>warning
												message</strong>, inside a box
										</li>
										<li class="close-bt"></li>
									</ul>
									<!-- content tab 1 -->
									<div style="float: left; width: 48%; overflow: hidden">
										<p class="colx2-left">

											<s:hidden name="directorate.directorateID"
												id="directorate.directorateID" />
											<s:hidden name="directorate.active" id="active" />
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label for="complex-en-url"
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%">BU/Directorate
												Name<font color="red">*</font>
											</label> <input type="text" name="directorate.directorateName"
												cssClass="full-width" style="width: 52%;" value="" />
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">BU/Directorate
												Short Description</label>
											<textarea name="directorate.shortDescription"
												style="width: 52%" value=""></textarea>
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Lead
												Contact</label>
											<s:textfield name="firstname" required="true"
												style="width: 40%;" id="lu.contactName" disabled="true" />
											<a href="javascript: void(0);" style="width: 20%"
												onclick="return popitup('search.action?contact.firstName=&contact.surName=')">Lookup</a>
										</p>
										<input type="checkbox" /> Copy Address from Organisation <br />
										<br />
										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
												Line 1<font color="red">*</font>
											</label> <input type="text" name="directorate.addressLine1"
												required="true" style="width: 52%;" id="lu.address_line1"
												value="" />
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
												Line 2</label>
											<s:textfield name="directorate.addressLine2" required="true"
												style="width: 52%;" id="addressLine2" />
										</p>
										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
												Line 3</label>
											<s:textfield name="directorate.addressLine3" required="true"
												style="width: 52%;" id="addressLine3" />
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label for="complex-en-url"
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Postcode<font
												color="red">*</font>
											</label>
											<s:textfield name="postCode" required="true"
												style="width: 40%;" id="lu.postCode" disabled="true" />
											<a href="javascript: void(0);"
												onclick="return popitup('add_lookup.action?address.postCode=&address.addressName=&address.townName=')">Lookup</a>
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Town/Village/City</label>
											<s:textfield name="townName" required="true"
												style="width: 52%;" id="lu.townName" disabled="true" />
										</p>

										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">County</label>
											<s:textfield name="countyName" required="true"
												style="width: 52%;" id="lu.countyName" disabled="true" />
										</p>
										<p class="colx2-left"
											style="width: 100%; margin-bottom: 10px; float: left;">
											<label for="complex-en-url"
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Nation/Country</label>
											<select name="lu.countryName" id="lu.countryName"
												class="full-width" style="width: 56%;">
												<option value=""></option>
											</select>
										</p>
									</div>

									<div style="float: right; width: 48%">

										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Type
												of Bussiness<font color="red">*</font>
											</label> <input type="text" name="businessName" style="width: 38%;"
												id="lu.businessName" readonly="readonly" value="" /> <a
												href="javascript: void(0);"
												onclick="return popitup('bus_lookup.action?business.businessName=&business.sicCode=')">Lookup</a>
										</p>


										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												SIC Code</label>
											<s:textfield name="sicCode" required="true"
												style="width: 50%;" id="lu.sicCode" disabled="true" />

										</p>

										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												BU/Directorate Full Description</label>
											<s:textarea name="directorate.fullDescription"
												style="width: 50%;"></s:textarea>
										</p>

										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Phone Number</label>
											<s:textfield name="directorate.phoneNumber"
												cssClass="full-width" style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Fax</label>
											<s:textfield name="directorate.fax" cssClass="full-width"
												style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Email</label>
											<s:textfield name="directorate.email" cssClass="full-width"
												style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Web Address</label>
											<s:textfield name="directorate.webAddress"
												cssClass="full-width" style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Chairity Number</label>
											<s:textfield name="directorate.charityNumber"
												cssClass="full-width" style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right"
											style="width: 100%; margin-bottom: 10px;">
											<label for="complex-en-subtitle"
												style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
												Company Number</label>
											<s:textfield name="directorate.companyNumber"
												cssClass="full-width" style="width: 52%;"></s:textfield>
										</p>
										<p class="colx2-right">
											<s:hidden name="contactID" id="contactID" />
											<s:hidden name="addressID" id="target5" />
											<s:hidden name="businessID" id="businessID" />
											<s:hidden name="orgID" id="orgID" />

										</p>
									</div>
									<!-- end content tab 1 -->

								</div>
								<div id="tabs-2">


									<div class="block-border"
										style="padding-top: 18px; padding-left: 0px; padding-right: 0px; width: 100%; height: 100%">
										<div class="block-controls">
											<div class="float-right">
												<a class="button red" title="Add" href="addDepartment.jsp">
													<span class="smaller">CREATE</span>
												</a> <input type="checkbox" name="checkInclude"
													${ checkInclude ? "checked" : "" }
													onchange="listDepartment?directorate=<s:property value="directorateID" />&filter=<s:property value="filter" />&checkInclude=<s:property value="checkInclude" />" />
												<label for="table-display" style="display: inline">Include
													In-active</label>

											</div>

											<ul class="controls-buttons" style="cursor: pointer">
												<s:hidden type="hidden" id="filter" name="filter" />
												<s:hidden type="hidden" id="directorateID"
													name="directorateID" />


												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=all"
													onclick="document.getElementById('filter').value = 'all'">
														<strong>ALL</strong>
												</a></li>
												<li class="sep"></li>
												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=0-9"
													onclick="document.getElementById('filter').value = '0-9'">
														<strong>0-9</strong>
												</a></li>
												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=ABCDE"
													onclick="document.getElementById('filter').value = 'ABCDE'">
														<strong>A B C D E</strong>
												</a></li>
												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=FGHIJ"
													onclick="document.getElementById('filter').value = 'FGHIJ'">
														<strong>F G H I J</strong>
												</a></li>

												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=KLMN"
													onclick="document.getElementById('filter').value = 'KLMN'">
														<strong>K L M N </strong>
												</a></li>

												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=OPQR"
													onclick="document.getElementById('filter').value = 'OPQR'">
														<strong>O P Q R </strong>
												</a></li>

												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=STUV"
													onclick="document.getElementById('filter').value = 'STUV'">
														<strong>S T U V </strong>
												</a></li>

												<li><a
													href="listDepartment?directorateID=<s:property value="directorateID" />&filter=WXYZ"
													onclick="document.getElementById('filter').value = 'WXYZ'">
														<strong>W X Y Z </strong>
												</a></li>

											</ul>


										</div>

										<div class="no-margin">
											<div class="no-margin">
												<table class="table" id="tablepaging" cellspacing="0"
													width="100%">
													<thead>
														<tr>

															<th scope="col">Department Name</th>
															<th scope="col">Address Line 1</th>
															<th scope="col">Postcode</th>
															<th scope="col">Contact</th>
															<th scope="col">IsActive?</th>
														</tr>
													</thead>
													<s:iterator value="departments" var="depa">
														<tr>
															<td><a href="ListTeam.jsp"> <s:property
																		value="departmentName" />
															</a></td>
															<td><s:property value="addr1" /></td>
															<td><s:property value="postCode" /></td>
															<td><s:property value="fullName" /></td>
															<td><s:property value="stringIsActive" /></td>
														</tr>
													</s:iterator>
												</table>
											</div>
										</div>


										<div class="block-footer" id="pageNavPosition">
											<script type="text/javascript">
												var pager = new Pager(
														'tablepaging', 5);
												pager.init();
												pager.showPageNav('pager',
														'pageNavPosition');
												pager.showPage(1);
											</script>
										</div>


									</div>
									<div class="clear"></div>
								</div>


							</div>
						</div>
					</div>
				</form>
			</div>
		</section>
	</article>


	<!-- End content -->

	<footer> </footer>

</body>
</html>